import React,{ useState, useEffect } from "react";
import './DataBoardTable.css'
import PercentBar from '../../components/PercentBar/PercentBar'
import axios from "../../http/index";



const ShowDataBlock = () => {
  const [column,setColumn] = useState([])
  const [Data,setData] = useState([])
  const GetData = () => {
    axios({
      url: "/data/board",
      method: "GET",
      data: {
        currentPage: 1
      },
    })
    .then((res) => {
      setColumn(res.data.rectList.column)
      setData(res.data.rectList.data)
    })
    .catch((err) => {
      console.log(err);
    });
  }
  useEffect(() => {
    GetData()
  },[])
  return (
    <div className="DataBoardTable">
      <table className="DataBoardTable_Table">
        <thead>
          <tr className="DataBoardTable_Head">
            { 
              column.map((item) => {
                return <th key={item.title}>{item.title}</th>
              })
            }
          </tr>
        </thead>
        <tbody>
          {
            Data.map((item,index) => {
              return (
                <tr className="DataBoardTable_Body" key={index}>
                  <td>{item.GoodsType}</td>
                  <td>{item.StorageNum}</td>
                  <td className="EchartsWidth">
                    <PercentBar TheData = {item.StorageRatio}></PercentBar>
                  </td>
                </tr>
              )
            })

          }
        </tbody>
      </table>
    </div>
  )
}
export default ShowDataBlock